<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>懒洋洋购物车</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../node_modules/layui/dist/css/layui.css">
    <style>
        body {
            padding: 20px;
        }
        .navbar {
            margin-bottom: 10px;
        }
        .search-form {
            margin-bottom: 10px;
        }
        .delete-btn {
            color: red;
            background-color: transparent;
            border: none;
            cursor: pointer;
        }
        .delete-btn:hover {
            color: #FF5722;
        }
        .product-img {
            width: 120px;
        }
        .layui-table tbody tr {
            height: 150px; /* 设置表格每行的高度为150px */
        }
        .layui-table-cell {
            height: auto;
            text-align: center;
        }
    </style>

</head>
<body>


<!--弹窗：请选择您要购买的商品-->
<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;

        layer.msg('请选择您要购买的商品');
    });
</script>

<!-- 搜索框 -->
<div class="search-form layui-row">
    <div class="layui-col-md12">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="keyword" placeholder="请输入关键字" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-col-md12">
    <table id="cartTable" lay-filter="cartTable"></table>
</div>


<!-- 底部按钮 -->
<div class="layui-row">
    <div class="layui-col-md6">
        <button class="layui-btn layui-btn-danger" id="deleteSelected">删除选中商品</button>
    </div>
    <div class="layui-col-md6" style="text-align: right;">
        已选择 <span id="selectedCount">0</span> 件商品，总价：<span id="totalPrice">0</span> 元
        <button class="layui-btn layui-btn-normal" id="checkout">结算</button>
    </div>
</div>



<script src="../../node_modules/layui/dist/layui.js"></script>
<script>
    layui.use(['table', 'form', 'element'], function(){
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;

        // 渲染购物车表格
        table.render({
            elem: '#cartTable',
            height: 'full-200',
            toolbar: '#toolbar',
            url: 'http://localhost:5000/good',
            defaultToolbar: [],
            cols: [[
                // {type:'checkbox'},
                {field:'img', title:'商品图', templet: '#imgTpl'},
                {field:'name', title:'商品名称'},
                {field:'price', title:'单价'},
                {field:'quantity', title:'数量', templet: '#quantityTpl'},
                {fixed:'right', title:'操作', toolbar:'#operateBar'}
            ]],
            // data: [
            //     {name:'安徽老字号正宗特产黄山烧饼梅干菜扣肉酥饼糕点早餐饼干零食小吃', img:'./layui/picture/lingshi1.jpg_.webp', price:'58.90', quantity:'1'},
            //     {name:'层层拉丝！坚果酥饼干单独小包装网红零食办公室解饿休闲食品小吃', img:'./layui/picture/lingshi2.jpg_.webp', price:'59.90', quantity:'1'},
            //     {name:'层层拉丝！坚果酥饼干单独小包装网红零食办公室解饿休闲食品小吃', img:'./layui/picture/lingshi3.jpg_.webp', price:'38.00', quantity:'1'}
            // ],
            // done: function(res, curr, count){
            //     form.render(); // 渲染表单元素
            // }
        });

        // 监听工具栏事件
        table.on('toolbar(cartTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            console.log(data);
            // TODO: 处理工具栏操作
        });

        // 监听行工具条事件
        table.on('tool(cartTable)', function(obj) {
            var data = obj.data;
            var layEvent = obj.event;
            console.log(data, layEvent);
            // TODO: 处理行工具条操作
            if (layEvent === 'delete') {
                // 删除商品
                layer.confirm('确定删除该商品吗？', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

        // 删除选中商品
        document.getElementById('deleteSelected').addEventListener('click', function() {
            var table = layui.table;
            var checkStatus = table.checkStatus('cartTable');
            var data = checkStatus.data;
            if (data.length > 0) {
                layer.confirm('确定删除选中商品吗？', function (index) {
                    for (var i = 0; i < data.length; i++) {
                        table.deleteRow(data[i].id);
                    }
                    layer.close(index);
                });
            } else {
                layer.msg('请先选择要删除的商品');
            }
        });

// 计算已选择商品数量和总价
        function calculateTotal() {
            var table = layui.table;
            var checkStatus = table.checkStatus('cartTable');
            var data = checkStatus.data;
            var count = 0;
            var totalPrice = 0;
            for (var i = 0; i < data.length; i++) {
                count += parseInt(data[i].quantity);
                totalPrice += parseFloat(data[i].price) * parseInt(data[i].quantity);
            }
            document.getElementById('selectedCount').textContent = count;
            document.getElementById('totalPrice').textContent = totalPrice.toFixed(2);
        }

// 监听复选框选中状态
        table.on('checkbox(cartTable)', function(obj){
            calculateTotal();
        });

    });
</script>



<script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs delete-btn" lay-event="delete"><i class="layui-icon layui-icon-delete"></i> 删除</a>
</script>
<script type="text/html" id="imgTpl">
    <img class="product-img" src="{{d.img}}">
</script>
</body>
</html>